<template>
    <div id="homeInspectionAdd">
      <div style="background: #fff;font-size: 14px;height: 100vh;">
        <div class="middle1">
          <div v-for="(item, index) in fileList2" :key="index">
            <p v-if="item.title" class="subTitle"><span class="line"></span>{{ item.title }}</p>
            <div v-else-if="item.type==='input'">
              <van-field
                required
                v-model="formData[item.key]"
                :name="item.name"
                :label="item.name"
                :readonly="item.readonly"
                placeholder="请输入"
                :rules="[{ required: true, message: '必填项不能为空' }]"
              />
            </div>
            <div v-else-if="item.type==='select'">
              <van-field
                :required="item.required"
                readonly
                clickable
                name="picker"
                :value="formData[item.key]"
                :label="item.name"
                placeholder="点击选择"
                @click="!item.readonly&&item.columns.length>0?item.showPicker = true:''"
              />
              <van-popup v-model="item.showPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="item.columns"
                  value-key="cityname"
                  @confirm="onConfirm2($event , item)"
                  @cancel="item.showPicker = false"
                />
              </van-popup>
            </div>
            <div v-else-if="item.type==='time'">
              <van-field
                readonly
                clickable
                name="datetimePicker"
                :value="formData[item.key]"
                :label="item.name"
                placeholder="点击选择时间"
                @click="item.showPicker = true"
              />
              <van-calendar v-model="item.showPicker" @confirm="onConfirm3($event , item)" />
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-top">
            <van-button style="width: 100vw;" type="info" @click="confirmBtn">确定</van-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

import axios from 'axios'
  export default {
    name: "homeInspectionAdd",
    data(){
      return{
        BaseURL:window.g.BaseURL,
        codeLevel:'',
        cityCode:'',
        fileList2: [
          {
            name: '任务名称',
            type:'input',
            key:'name'
          },
          {
            title: '任务区域'
          },
          {
            name: '省（市、区）',
            type:'input',
            readonly:true,
            key:'province',
          },
          {
            name: '市（州、盟）',
            type:'select',
            key:'cityName',
            showPicker:false,
            columns:[],
            level:'市',
            required:true
          },
          {
            name: '县（市、区、旗）',
            type:'select',
            key:'countyName',
            columns:[],
            showPicker:false,
            level:'县',
            required:true
          },
          {
            name: '乡（镇、街道）',
            type:'select',
            key:'townName',
            columns:[],
            showPicker:false,
            level:'村镇',
          },
          {
            name: '村（社区）',
            type:'select',
            key:'villageName',
            columns:[],
            showPicker:false,
            level:'社区'
          },
          {
            name: '计划完成时间',
            type:'time',
            key:'finishDate',
            showPicker:false,
          },
        ],
        formData:{
          province:'惠州市',
          finishDate:'',
          name:'',
          cityCode:'',
          type:2
        },
      }
    },
    methods:{
      onConfirm3(date,item){
        this.formData[item.key] = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        item.showPicker = false;
      },
      //判断省市||区县
      citycode(str) {
        if (str.endsWith("0000000000")) {
          //省
          return "省";
        } else if (str.endsWith("00000000")) {
          return "市";
        } else if (str.endsWith("000000")) {
          return "县";
        } else if (str.endsWith("000")) {
          return "村镇";
        } else {
          return "社区"
        }
      },
      getCountyData: async function () {
        this.getCityData(window.localStorage.getItem('citycode')).then((webResult)=>{
          console.log(webResult)
          console.log(this.codeLevel)
          if (this.codeLevel=='市') {
            this.fileList2[4].columns = webResult.data.data
          } else if (this.codeLevel=='县') {
            this.fileList2[5].columns = webResult.data.data
          }else if (this.codeLevel=='村镇') {
            this.fileList2[6].columns = webResult.data.data
          } else if (this.codeLevel=='省') {
            this.fileList2[3].columns = webResult.data.data
          }
        })
      },
      getCityData: async function (data){
        return new Promise(async(resovlve, reject) => {
          let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + data)
          resovlve(webResult)
        })
      },
      onConfirm2(data,item){
        console.log(data)
        this.formData[item.key] = data.cityname
        if (item.name=='市（州、盟）') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[4].columns = webResult.data.data
          })
          this.formData.countyName = ""
          this.formData.townName = ""
          this.formData.villageName = ""
        } else  if (item.name=='县（市、区、旗）') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[5].columns = webResult.data.data
          })
          this.formData.townName = ""
          this.formData.villageName = ""
        }else  if (item.name=='乡（镇、街道）') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[6].columns = webResult.data.data
          })
          this.formData.villageName = ""
        }
        this.formData.cityCode = data.citycode
        item.showPicker = false
      },
      confirmBtn: async function (){
        console.log(this.formData)
        if (this.formData.cityName && this.formData.name && this.formData.countyName) {
          let param = {
            "cityCode": this.formData.cityCode,
            "name": this.formData.name,
            "finishDate":this.formData.finishDate?this.formData.finishDate+' 00:00:00':'',
            "type":this.formData.type
          }
          let result = await axios.post(`${this.BaseURL}api/farmerHouse/houseCheckFwCheckCountry/taskSave`, param);
          console.log(result)
          if (result.data.data){
            this.$toast.success("保存成功")
            this.$router.push({
              path: '/CityList',
            })
          }
        } else {
          this.$toast.fail("请填写必填项")
        }

      },
      getCityName: async function (code){
        let result = await axios.post(`${this.BaseURL}api/farmerHouse/cityCode/getAllParentByCityCode?cityCode=${code}`);
        console.log(result)
        this.formData.cityName = result.data.data.cityName
        this.formData.countyName = result.data.data.countyName
        this.formData.townName = result.data.data.townName
        this.formData.villageName = result.data.data.villageName
        if (result.data.data.cityName) {
          this.fileList2[3].readonly = true
        }
        if (result.data.data.countyName) {
          this.fileList2[4].readonly = true
        }
        if (result.data.data.townName) {
          this.fileList2[5].readonly = true
        }
        if (result.data.data.villageName) {
          this.fileList2[6].readonly = true
        }
        this.$forceUpdate()
      }
    },
    mounted(){

      this.codeLevel = this.citycode(window.localStorage.getItem('citycode'))
      this.getCityName(window.localStorage.getItem('citycode'))
      this.getCountyData()
    }
  };
</script>

<style scoped lang="scss">
  #homeInspectionAdd{
    .middle1 {
      height: 87vh;
      overflow-y: auto !important;
      font-weight:400;
    }
    .subTitle {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #9b9b9b;
      padding-left: 10px;

      .line {
        width: 6px;
        height: 26px;
        background: #3f8ffc;
        display: inline-block;
        margin-right: 10px;
      }
    }
    .bottom {
      /*display: flex;*/
      /*align-items: center;*/
      /*justify-content: space-around;*/
      position: absolute;
      bottom: 10px;
      // padding: 6px;
    }
  }

</style>
